<?php $this->beginClip('pagetitle'); ?><?php echo $merchant_name; ?><?php $this->endClip(); ?>

<link rel="stylesheet" href="/resources/common/bootstrap-3.3.4/css/bootstrap.min.css" />

<style>
    html,body {
        height: 100%;
        position: relative;
    }
    a {
        -webkit-tap-highlight-color: transparent;
    }
    a:focus {
        outline: none;
        text-decoration: none !important;
    }
    a:hover {
        text-decoration: none !important;
    }

    * {
        -webkit-touch-callout: none;
        -webkit-touch-callout: none;
        -moz-touch-callout:none;
        -ms-touch-callout:none;
        touch-callout:none;

        - moz-user-select: -moz-none;
        -moz-user-select: none;
        -o-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    /* payment disp label */
    .discount-setup {
        background: none;
        text-align: center;
        box-shadow: none;
        border: none;
        margin: 50px auto 0 auto;
        width: 280px;
    }

    .discount-setup #sub-img {
        position: absolute;
        left: 50%;
        margin-left: -50px;
        top: 220px;
        width: 100px;
        height: 100px;
        border-radius: 5px;
    }
    .discount-setup .close {
        display: block;
        position: absolute;
        top: -20px;
        right: -17px;
        border: none;
        box-shadow: none;
        background: none;
        outline: none !important;
        color: #FFF;
        filter: alpha(opacity=70) !important;
        -moz-opacity: 0.7 !important;
        -khtml-opacity: 0.7 !important;
        opacity: 0.7 !important;
    }
    #text-des{
        position: absolute;
        width: 100%;
        text-align: center;
        left: 0px;
        top: 140px;
        font-size: 20px;
        color: #FBdfc9;
        font-weight: 600;
    }
    #jiantou{
        position: absolute;
        left: 72px;
        top: 165px;
        height: 40px;
        width: 20px;
    }
    .rotate{
        -webkit-animation: anim .4s infinite alternate;
        -ms-animation: anim .4s infinite alternate;
        animation: anim .4s infinite alternate;
    }
    .rotate_span{
        transform:rotate(25deg);
        -ms-transform:rotate(25deg); 	/* IE 9 */
        -moz-transform:rotate(25deg); 	/* Firefox */
        -webkit-transform:rotate(25deg); /* Safari 和 Chrome */
        -o-transform:rotate(25deg); 	/* Opera */
    }
    @-webkit-keyframes anim {
        from { -webkit-transform: rotateY(180deg); }
        to { -webkit-transform: rotateY(360deg); }
    }
    @-ms-keyframes anim {
        from { -ms-transform: rotateY(180deg); }
        to { -ms-transform: rotateY(360deg); }
    }
    @keyframes anim {
        from { transform: rotateY(180deg); }
        to { transform: rotateY(360deg); }
    }
    .rule_p{
        text-align: left;
    }
    p{
        margin: 0px;
    }
    #double-txt{
        /*border: 1px solid red;*/
        background-color: gold;
        width: 120px;
        height: 60px;
        margin: 0 auto;
        margin-top: 20px;
        font-size: 3rem;
        color: #7e6934;
        line-height: 20px;
        background: url("/resources/frontend/images/double.png") no-repeat;
        background-size: 100% 100%;
        padding-top: 5px;
    }
    .hiden{
        display: none;
    }
    .desc_container{padding: 0px;}
    .rule_title{
        height: 50px;
        line-height: 50px;
        background-color: #FED944;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        font-size: 1.7rem;
    }
    table{
        font-size: 1.6rem;
        border-collapse:separate;
        border-spacing:5px 25px;
        padding-left: 15px;
        padding-right: 15px;
    }
    table tr{padding: 10px 30px}
    .rule_item{
        padding: 2px 7px;
        margin: 5px;
        background-color: #FED944;
        font-size: 14px;
        margin-right: 15px;
    }
    .rule_iknow{
        height: 40px;
        font-size: 16px;
        margin-top: 30px;
        border-top: 1px solid #f6f6f6;
        line-height: 40px;
    }
    .no_redpack_res_title{
        height: 40px;
        text-align: center;
        background-color: #FED944;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        padding-top: 10px;
    }
    .no_redpack_res_body{
        padding: 40px 10px;
        font-size: 18px;
    }
    .rule_tips{
        font-size: 18px;
        padding-left: 8px;
        font-weight: 500;
    }
    .second_getredpack{
        display: block;
        margin: 10px auto;
        border: none;
        font-size: 12px;
        color: #fff;
        padding: 6px 19px;
        background-color: #FDCB2B;
        border-radius: 2px;
    }
    .new_member_p{
        font-size: 16px;
        color: #ff6547;
        font-weight: bold;
        margin-top: 8px;
    }
</style>

<script src="/resources/common/bootstrap-3.3.4/js/bootstrap.min.js"></script>

<div id="sub-modal" aria-hidden="true" data-backdrop="static" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content discount-setup" style="background-repeat: no-repeat; background-size: 100% 100%; background-image: url('/resources/frontend/images/red-bk.png'); width: 280px; min-height: 402px; margin: 50px auto;">
            <div id="jiantou" class="hidden" style="display: inline-block; overflow: hidden; background-repeat: no-repeat; background-size: 100% 100%; background-image: url('/resources/frontend/images/jt.png');"></div>
            <div id="text-des" style="font-size: 20px;">恭喜发财，大吉大利</div>
            <img id="sub-img" src="/resources/frontend/images/anniu.png" data-idmp="" />
            <button id="closedeliver" class="close sub-modal-close-btn" type="button">
                <img src="/resources/frontend/images/close-btn.png" style="width: 22px" />
            </button>
        </div>
    </div>
</div>

<div id="sub-result-modal" aria-hidden="true" data-backdrop="static" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content discount-setup" style="background-repeat: no-repeat; background-size: 100% 100%; background-image: url('/resources/frontend/images/res-bkg.png'); width: 280px;min-height: 402px; margin: 50px auto;text-align: center;padding-bottom: 15px;">
            <img src="/resources/frontend/images/zlogo.png" style="width:55px;height: 55px;margin-top: 70px" alt="">
            <p class="sub-res-text" style="font-size: 16px;font-weight: bold;margin-top: 5px">摇钱吧</p>
            <p class="sub-res-text" style="font-size: 16px;color: #ADACAC;margin-top: 10px">恭喜发财，大吉大利</p>
            <p class="sub-res-text" style="font-size: 16px;color: #ADACAC; margin-top: 35px">恭喜您获得红包</p>
            <div class="old_member_div" style="font-size: 0px;color: #444; margin:8px auto;text-align: center; display: block;">
                <span id="discount-txt" style="font-weight: 700;font-size: 30px">0</span>
                <span style="font-size: 18px;">元</span>
            </div>
            <div class="new_member_div" style="font-size: 0px; color: #444; margin:5px auto;text-align: center; display: none;">
                <span id="second_discount-txt" style="font-weight: 700;font-size: 25px">0</span>
                <span style="font-size: 12px;">元</span>
                <p class="new_member_p" style="margin-bottom: 0px">您有新用户福利呦！</p>
                <button class="second_getredpack">再领一个</button>
            </div>
            <p class="sub-res-text hiden" style="font-size: 12px;color: red">已自动为您使用加一卡</p>
            <p class="sub-res-text" style="color: #A0A8B8;font-size: 10px;margin-top: 15px;">此红包下次可使用</p>

            <button id="closedeliver" class="close" type="button">
                <img src="/resources/frontend/images/close-btn.png" style="width: 22px" />
            </button>
        </div>
    </div>
</div>

<div id="sub-double-result-modal" aria-hidden="true" data-backdrop="static" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content discount-setup" style="background-repeat: no-repeat; background-size: 100% 100%; background-image: url('/resources/frontend/images/res-bkg.png'); width: 280px; height: 402px; margin: 50px auto;">
            <img src="/resources/frontend/images/zlogo.png" style="width:55px;height: 55px;margin-top: 70px" alt="">
            <p class="sub-res-text" style="font-size: 16px;font-weight: bold;margin-top: 5px">摇钱吧</p>
            <p class="sub-res-text" style="font-size: 16px;color: #ADACAC">恭喜发财，大吉大利</p>
            <p class="sub-res-text" style="font-size: 16px;color: #ADACAC; margin-top: 35px">恭喜您获得</p>
            <div style="color: #444;margin: 10px auto;text-align: center;">
                <div id="double-txt">
                    <p style="font-size: 12px">红包加一卡</p>
                    <p> + 1</p>
                </div>
            </div>
            <p class="sub-res-text" style="color: #A0A8B8; margin-top: 25px;font-size: 12px">下次红包自动加0.1元</p>
            <p class="sub-res-text" style="color: #A0A8B8; margin-top: 5px;font-size: 12px">每次限用一张</p>
            <button id="closedeliver" class="close" type="button">
                <img src="/resources/frontend/images/close-btn.png" style="width: 22px" />
            </button>
        </div>
    </div>
</div>

<div id="sub-no-result-modal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content discount-setup" style="background-color: #fff;">
            <div class="no_redpack_res_title">
                <img src="/resources/frontend/images/no_redpack_des_title.png" alt="" style="width: 25px;height: 25px;margin-top: -10px"><span class="rule_tips">提示</span>
            </div>
            <div class="no_redpack_res_body">
                <?php echo $desc_in_view;?>
            </div>
            <div class="rule_iknow" style="margin-top: 0px;">我知道了</div>
        </div>
    </div>
</div>


<div id="get_redpack_rule" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content discount-setup" style="background-color: #fff">
            <div class="container desc_container">
                <div class="rule_title">奖励红包规则</div>
                <table style="width: 100%;">
                    <tr class="rule_body">
                        <td>
                            <div class="rule_item">1</div>
                        </td>
                        <td>订单交易金额满足1元。</td>
                    </tr>
                    <tr class="rule_body">
                        <td><span class="rule_item">2</span></td>
                        <td>同一用户在同一商户下，1小时内只能领取两次红包。</td>
                    </tr>
                    <tr class="rule_body">
                        <td><span class="rule_item">3</span></td>
                        <td>您关注的“摇钱吧福利社”是我们为您发红包的渠道，请勿取关。</td>
                    </tr>
                </table>
                <div class="rule_iknow">我知道了</div>
            </div>
        </div>
    </div>
</div>

<!--<div id="sub-empty-modal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <h5 style="margin: 50px 0 60px 0; text-align: center;">暂无关注二维码</h5>
        </div>
    </div>
</div>-->

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12" style="border-bottom: solid 1px #dde;">
            <h4 style="text-align: center; line-height:40px;vertical-align:middle;">
                <img src="/resources/frontend/images/circle-green-tick.png" style="width: 22px;vertical-align:middle; " />
                <span style="color: #449d44; font-size: 16px;vertical-align:middle;">&nbsp;支付成功</span>
            </h4>
        </div>
        <div class="col-md-12">
            <h1 style="text-align: center; margin-top: 20px; font-size: 44px; ">
                <span style="font-size: 22px;">¥ </span><?php echo sprintf('%.2f', $tradeDetail->amount / 100.00); ?>
            </h1>

            <p style="margin: 36px 10px 0 10px; font-size: 14px;">
                店家收款 <span style="float: right;">¥ <?php echo sprintf('%.2f', $tradeDetail->amount_due / 100.00); ?></span>
            </p>
            <p style="margin: 14px 10px 0 10px; font-size: 14px;">
                交易时间 <span style="float: right;"><?php echo date('Y-m-d H:i:s'); ?></span>
            </p>
            <p style="margin: 14px 10px 0 10px; font-size: 14px;">
                优&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;惠 <span style="float: right; color: #e55;">红包抵扣 ¥<?php echo sprintf('%.2f', $tradeDetail->discount / 100.00); ?></span>
            </p>
            <h5 style="margin: 14px 10px 0 10px; font-size: 14px;">
                收&nbsp;&nbsp;款&nbsp;&nbsp;方 <span style="float: right;"><?php echo $merchant_name; ?></span>
            </h5>
            <p style="margin: 14px 10px 0 10px; font-size: 14px;">
                交易单号 <span style="float: right;"><?php echo $tradeDetail->out_tradeno; ?></span>
            </p>
        </div>

        <div style="margin-top: 25px;text-align: center"><a href="javascript:;" class="get_redpack_rule" >发放红包规则</a></div>
        <div class="col-md-12 text-center disabled" style="text-align: center">
            <button id="paydone-btn" style="font-size: 13px; color: #00b263;border-radius: 5px; margin-top: 35px; padding: 8px 45px 5px 45px; background: transparent !important; border: solid 1px #00b263;" type="button" class="btn">完 成</button>

            <div style="text-align: center;margin-top: 10px">
                <img src="/resources/frontend/images/pvtext2.png" style="width: 42px;" />
            </div>
        </div>
    </div>
</div>

<?php $this->renderPartial('/template/payLoading')?>
<script type="text/javascript">
    var trans_url = '/pay/getApiData',
        is_get_flage = false,
        is_can_get = '<?php echo $is_can_get?>',
        already_get_redpack="<?php echo $tradeDetail->is_get_redpack?>",
        show_type="<?php echo $show_data['show_type']?>",
        show_amount="<?php echo $show_data['amount']?>";
    //红包
    var sub_modal_src='<?php echo $get_discount_data['qrcodeurl']?>',
        data_idmp='<?php echo $get_discount_data['idmp']?>',
        idmpinforecord = '<?php echo $get_discount_data['idmpinforecord']?>',
        status = '<?php echo $get_discount_data['status']?>',
        requestNo=1;

    window.timerGetIsDiscount='';
    function getIsDiscount() {
        window.timerGetIsDiscount = setInterval(function(){
            if(is_get_flage){
                return ;
            }
            $.ajax({
                type: 'POST',
                url: trans_url,
                data: {
                    idTradeDetail: '<?php echo $tradeDetail->id_tradedetail; ?>',
                    requestNo: requestNo,
                    idWxuserDouble: "<?php echo $get_discount_data['id_wxuser_double']?>",
                    idWxuser: '<?php echo $tradeDetail->id_wxuser; ?>',
                    openid: '<?php echo $wxuser->openid; ?>',
                    unionId: '<?php echo $wxuser->unionid; ?>',
                    idMerchant: '<?php echo $id_merchant; ?>',
                    nickname: '<?php echo $wxuser->nickname_encode; ?>',
                    headImgUrl: '<?php echo $wxuser->avatar_url; ?>',
                    language: '<?php echo $wxuser->language; ?>',
                    province: '<?php echo base64_encode($wxuser->province); ?>',
                    country: '<?php echo base64_encode($wxuser->country); ?>',
                    city: '<?php echo base64_encode($wxuser->city); ?>',
                    sex: parseInt('<?php echo $wxuser->gender; ?>'),
                    idmp: $('#sub-modal #sub-img').attr('data-idmp'),
                    entryIdWxplatform: '<?php echo $wxuser->id_wxplatform ?>',
                    idmpinforecord:idmpinforecord,
                    type:'get',
                    api_url:"<?= app()->params['get_isdiscount']?>",
                    api_type:'get_isdiscount',
                    api_place: 'pay_success'
                },
                dataType: "json",
                success: function(data){
                    if(is_get_flage){
                        return ;
                    }

                    if(data.api_result == 200){
                        if(data.isdiscount){
                            is_get_flage = true;
                            var rep_discount = data.discount*1;
                            if(data_idmp === "<?php echo app()->params['main_mapinfo_id']?>"){
                                $('#second_discount-txt').text(rep_discount.toFixed(2));
                                $('.old_member_div').css('display', 'none');
                                $('.new_member_div').css('display', 'block');
                            }else{
                                $('#discount-txt').text(rep_discount.toFixed(2));
                                $('.old_member_div').css('display', 'block');
                                $('.new_member_div').css('display', 'none');
                            }

                            $('#sub-modal').modal('hide');
                            if(data.idWxuserDouble != ''){
                                $('.sub-res-text.hiden').css('display','block');
                            }

                            if(data_idmp === "<?php echo app()->params['main_mapinfo_id']?>"){
                                $('.old_member_div').css('display', 'none');
                                $('.new_member_div').css('display', 'block');
                            }
                            $('#sub-result-modal').modal('show');
                            clearInterval(window.timerGetIsDiscount);
                            return;
                        }
                    }
                },
                error:function(){
                    clearInterval(window.timerGetIsDiscount);
                    // alert('');
                }
            });
        }, 2000);
    }
    $(function(){

        $('.modal .close').on('click', function(){
            $(this).parents('.modal').modal('hide');

            if($(this).hasClass('sub-modal-close-btn') && status == '<?php echo TradeDetail::GET_REDPACK_TYPE1?>'){

                $.ajax({
                    url:'/pay/Deliverhis',
                    async:true,
                    type: 'post',
                    data:{'id_wxuser':"<?php echo $tradeDetail->id_wxuser; ?>", 'idmp':data_idmp, 'action':"<?php echo MpDeliverHis::ACTION_CLOSE?>", 'id_tradedetail':"<?php echo $tradeDetail->id_tradedetail?>"},
                    success:function(){},
                    error:function(){},
                });

            }

            if(window.timerGetIsDiscount != ''){
                clearInterval(window.timerGetIsDiscount);
            }
        });

        if(show_type == '1'){
            $('#sub-modal').modal('show');
            if(status == '<?php echo TradeDetail::GET_REDPACK_TYPE1?>') {

                $.ajax({
                    url: '/pay/Deliverhis',
                    async: true,
                    type: 'post',
                    data: {
                        'id_wxuser': "<?php echo $tradeDetail->id_wxuser; ?>",
                        'idmp': data_idmp,
                        'action': "<?php echo MpDeliverHis::ACTION_OPEN?>",
                        'id_tradedetail': "<?php echo $tradeDetail->id_tradedetail?>"
                    },
                    success: function () {
                    },
                    error: function () {
                    },
                });
            }
        }else if(show_type == '2'){//发放过红包

            $('#discount-txt').text(show_amount);
            $('#sub-result-modal').modal('show');
        }else if(show_type == '3'){//发放过翻倍卡
            $('#sub-double-result-modal').modal('show');

        }else if(is_can_get == "<?php echo TradeDetail::CANNOT_GET_REDPACK ;?>" && already_get_redpack == '0'){//未达到要求
            $('#sub-no-result-modal').modal('show');
        }

        //红包规则
        $('.get_redpack_rule').click(function(){
            $('#get_redpack_rule').modal('show');
        });
        $('.rule_iknow').click(function(){
            $(this).parents('.modal').modal('hide');
        });
        //点击开事件
        $('#sub-img').click(function(){
            var _this = this;
            if($(_this).hasClass('already_click')){
                return ;
            }
            $(_this).addClass('already_click');
            if(!$(this).hasClass('change-code')) $(this).addClass('rotate');
            $(this).addClass('change-code');

            if(status == '<?php echo TradeDetail::GET_REDPACK_TYPE1?>'){

                setTimeout(function () {
                    $('#sub-img').removeClass('rotate');
                    $('#text-des').css('font-size','20px').html('长按二维码，最高可<span class="rotate_span" style="font-weight: bold;">免单</span>哦');
                    $('#jiantou').removeClass('hidden');
                    $('#sub-modal #sub-img').css({'width':'130px','height':'130px','margin-left':'-65px','top':'215px'}).attr({
                        src: sub_modal_src,
                        'data-idmp': data_idmp
                    });

                    getIsDiscount();
                },800)
            }else{
                $.ajax({
                    type: 'POST',
                    url: '/pay/getprize',
                    data: {
                        id_tradedetail: '<?php echo $tradeDetail->id_tradedetail; ?>',
                        id_wxuser: '<?php echo $tradeDetail->id_wxuser; ?>'
                    },
                    dataType: "json",
                    success: function(data){

                        if(data.code == 200){
                            setTimeout(function () {
                                $('#sub-img').removeClass('rotate');
                                $('#sub-double-result-modal').modal('show');
                            },500);
                            $('#sub-modal').modal('hide');
                        }
                    },
                    error:function(){
                        $('#sub-modal').modal('hide');
                        $('#sub-img').removeClass('rotate');
                        $('#sub-double-result-modal').modal('show');
                    }
                });
            }
        });
        //再领取一次
        $('.second_getredpack').click(function(){
            var _this = this;
            requestNo = 2;
            if($(_this).hasClass('loadding')){
                return false;
            }
            $(_this).addClass('loadding');

            easyloading('show');
            $.ajax({
                type: 'POST',
                url: trans_url,
                data: {
                    idTradeDetail: '<?php echo $tradeDetail->id_tradedetail; ?>',
                    idMerchant: '<?php echo $id_merchant; ?>',
                    idWxuser: '<?php echo $wxuser->id_wxuser; ?>',
                    nickname: '<?php echo $wxuser->nickname_encode; ?>',
                    headImgUrl: '<?php echo $wxuser->avatar_url; ?>',
                    openid: '<?php echo $wxuser->openid; ?>',
                    unionId: '<?php echo $wxuser->unionid; ?>',
                    language: '<?php echo $wxuser->language; ?>',
                    province: '<?php echo base64_encode($wxuser->province); ?>',
                    country: '<?php echo base64_encode($wxuser->country); ?>',
                    city: '<?php echo base64_encode($wxuser->city); ?>',
                    sex: parseInt('<?php echo $wxuser->gender; ?>'),
                    requestNo: requestNo,
                    type:'get',
                    api_url:"<?= app()->params['get_qrcode']?>",
                    api_type:'get_qrcode',
                    api_place: 'bonushis'
                },
                dataType: "json",
                success: function(data){

                    $('#sub-result-modal').modal('hide');
                    $('#sub-double-result-modal').modal('hide');
                    if(data.api_result == 200){
                        status = data.status;
                        $('#sub-modal #sub-img').css({"width": "100px","height": "100px",'margin-left': '-50px','top': '220px'}).attr({src: '/resources/frontend/images/anniu.png', 'data-idmp': ''});
                        if(data.status=='<?php echo TradeDetail::GET_REDPACK_TYPE1?>'){
                            if(data.status == '1'){
                                sub_modal_src = data.qrcodeurl;
                                data_idmp = data.idmp;
                                is_get_flage = false;
                                idmpinforecord = data.idmpinforecord;
                                $.ajax({
                                    url:'/pay/Deliverhis',
                                    async:true,
                                    type: 'post',
                                    data:{'id_wxuser':"<?php echo $wxuser->id_wxuser; ?>", 'idmp':data_idmp, 'action':"<?php echo MpDeliverHis::ACTION_OPEN?>", 'id_tradedetail':'<?php echo $tradeDetail->id_tradedetail; ?>'},
                                    success:function(){},
                                    error:function(){}
                                });
                            }
                        }

                        $('#sub-img').removeClass('change-code');
                        $('#sub-img').removeClass('already_click');
                        $('#jiantou').addClass('hidden');
                        $('#sub-modal').modal('show');
                        easyloading('hide');
                    }
                },
                error:function(){
                    $(_this).removeClass('loadding');
                    easyloading('hide');
                    $('#sub-result-modal').modal('hide');
                    $('#sub-double-result-modal').modal('hide');
                    $('#sub-modal').modal('hide');
                }
            });
        });

        //完成按钮
        setTimeout(function(){
            $('#paydone-btn').removeClass('disabled');
        },2000);
        $('#paydone-btn').on('click', function(){
            var _this = this;
            if($(_this).hasClass('disabled')){
                return ;
            }

            WeixinJSBridge.call('closeWindow');
        });
    });
</script>
